<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css" >
    <link rel="stylesheet" href="js/bootstrap.js" >
    <link rel="stylesheet" href="css/font-awesome.min.css" >
</head>
<body>
<div id="app">
    <div class="head" style="margin-top:10px;background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);color: white;font-size: large">
        目前借阅 {{page_borrow.total}} 本
    </div>
    <div class="info">
        <table class="table">
            <thead>
            <tr>
                <th>书名</th>
                <th>书主用户名</th>
                <th>书主联系方式</th>
                <th>书主邮箱</th>
                <th>借书日期</th>
                <th>应还日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in page_borrow.list" :key="item.b_name">
                <td>{{item.b_name}}</td>
                <td>{{item.u_name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.email}}</td>
                <td>{{item.borrow_date}}</td>
                <td>{{item.return_date}}</td>
                <td>
                    <button type="button" class="btn btn-link" style="padding: 0" @click="createReturnRequest(item.u_id, item.b_id)">还书</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <nav style="margin-top: 30px">
        <ul class="pagination" style="display: flex;align-items: center;">
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goBorrowPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goBorrowPage(page_borrow.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goBorrowPage(page_borrow.next)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goBorrowPage(page_borrow.last)">尾页</a></li>
        </ul>
    </nav>

    <div class="head" style="margin-top:10px;background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);color: white;font-size: large">
        目前借出 {{page_lend.total}} 本
    </div>
    <div class="info">
        <table class="table">
            <thead>
            <tr>
                <th>书名</th>
                <th>借者用户名</th>
                <th>借者联系方式</th>
                <th>借者邮箱</th>
                <th>借书日期</th>
                <th>应还日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in page_lend.list" :key="item.b_name">
                <td>{{item.b_name}}</td>
                <td>{{item.u_name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.email}}</td>
                <td>{{item.borrow_date}}</td>
                <td>{{item.return_date}}</td>
                <td>
                    <button type="button" class="btn btn-link" style="padding: 0" @click="createMessage(item.u_id)">催还</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <nav style="margin-top: 30px">
        <ul class="pagination" style="display: flex;align-items: center;">
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goLendPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goLendPage(page_lend.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goLendPage(page_lend.next)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goLendPage(page_lend.last)">尾页</a></li>
        </ul>
    </nav>

    <div id="add-win" style="display:none;padding:15px;">
       <textarea rows="8" cols="45" v-model="message"></textarea>
        <div>
            <button type="button" class="btn btn-primary"  @click="sendMessage" style="display:block;margin:0 auto">发送</button>
        </div>
    </div>
</div>

<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>
    const app = {
        //data函数专门用来定义数据
        data() {
            return {
                //查询条件
                query_borrow:{
                    pageNum:1,
                    pageSize:3,
                    b_name:'',
                    u_name:'',
                    phone:'',
                    email:'',
                    borrow_date:'',
                    return_date:''
                },

                query_lend:{
                    pageNum:1,
                    pageSize:3,
                    b_name:'',
                    u_name:'',
                    phone:'',
                    email:'',
                    borrow_date:'',
                    return_date:''
                },

                page_borrow:{},//borrow分页对象

                page_lend:{},//lend分页对象

                message:"",

                to_id:{
                    id:'',
                },

                messageIdx:null,
            };
        },

        //定义方法
        methods: {

            //分页跳转
            goBorrowPage(pageNum, pageSize) {
                if (pageNum) {
                    this.query_borrow.pageNum = pageNum;
                    if (pageSize) {
                        this.query_borrow.pageSize = pageSize;
                    }
                } else {
                    this.query_borrow.pageNum = 1;
                }
                this.getInfoList();
            },

            goLendPage(pageNum, pageSize) {
                if (pageNum) {
                    this.query_lend.pageNum = pageNum;
                    if (pageSize) {
                        this.query_lend.pageSize = pageSize;
                    }
                } else {
                    this.query_lend.pageNum = 1;
                }
                this.getInfoList();
            },

            //获取数据
            getInfoList() {
                const loadIdx = layer.load(0, {
                    success: () => {//等待加载提示显示出来后，再加载数据，这样可以避免加载提示一直在转圈圈。
                        //加载数据
                        myAxios.get('/borrowinfo/borrowinfolist', {params: this.query_borrow}).then((response) => {
                            layer.close(loadIdx);
                            this.page_borrow = response.data.data;
                            console.log(this.page_borrow)
                            this.query_borrow.pageNum = this.page_borrow.current;//用服务端数据校正客户端数据参数
                            this.query_borrow.pageSize = this.page_borrow.pageSize;//用服务端数据校正客户端数据参数
                        }).catch(err => {
                            layer.close(loadIdx);
                        }).finally(() => {
                            layer.close(loadIdx);
                        });

                        myAxios.get('/borrowinfo/lendinfolist', {params: this.query_lend}).then((response) => {
                            layer.close(loadIdx);
                            this.page_lend = response.data.data;
                            console.log(this.page_borrow)
                            this.query_lend.pageNum = this.query_lend.current;//用服务端数据校正客户端数据参数
                            this.query_lend.pageSize = this.query_lend.pageSize;//用服务端数据校正客户端数据参数
                        }).catch(err => {
                            layer.close(loadIdx);
                        }).finally(() => {
                            layer.close(loadIdx);
                        });
                    }
                });
            },

            createMessageBox(){
                this.messageIdx = layer.open({
                    type: 1,
                    title: '消息内容',
                    area: ['400px', '330px'],
                    content: $('#add-win')
                });
            },

            createMessage(id){
                this.to_id.id = id;
                this.createMessageBox()
            },

            sendMessage(){
                const loadIdx = layer.load(0, {
                    success: () => {
                        this.to_id.message = this.message
                        myAxios.get("/sendMessage",{params:this.to_id}).then((response) => {
                            layer.msg("消息发送成功！",{icon: 1});
                            layer.close(loadIdx);
                            layer.close(this.messageIdx)
                        }).catch(err => {
                            layer.msg("消息发送失败！",{icon: 2});
                            layer.close(loadIdx);
                        }).finally(() => {
                            layer.close(loadIdx);
                        });
                    }
                });
            },

            createReturnRequest(u_id, b_id){
                this.to_id.u_id = u_id;
                this.to_id.b_id = b_id;
                const loadIdx = layer.load(0, {
                    success: () => {
                        myAxios.get("/sendRequest",{params:this.to_id}).then((response) => {
                            layer.msg("发送请求成功！",{icon: 1});
                            layer.close(loadIdx);
                        }).catch(err => {
                            layer.msg("发送请求失败！",{icon: 2});
                            layer.close(loadIdx);
                        }).finally(() => {
                            layer.close(loadIdx);
                        });
                    }
                });
            }

        },
            //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted() {
            this.goBorrowPage(1);
            this.goLendPage(1);
        }
    };

    Vue.createApp(app).mount('#app')

</script>

</body>
</html>